<template>
	<view class="category">
		<view class="leftNav">
			<view
				class="nav-item"
				v-for="(item, index) in navlist"
				:key="index"
				:class="{  oldSel: index == oldCurrent,select: index == current }"
				@click="changeSelect(index, current)"
			>
				{{ item.text }}
			</view>
		</view>
		<view class="rightGoods">
			<view class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="goDetail">
				<image :src="item.imgUrl" mode="heightFix"></image>
				<view class="itemMessage">
					<text class="messText">{{ item.text }}</text>
					<view class="messPrice">
						<text class="pricetext">￥{{ item.price }}</text>
						<image src="../../static/gwc2.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navlist: [],
			current: 1,
			oldCurrent: null,
			goodsList: []
		};
	},
	created() {
		let that = this;
		this.$http({
			url: '/category/navlist',
			success(res) {
				that.navlist = res.data;
			}
		});
		this.getgoods(1);
	},
	methods: {
		changeSelect(index, old) {
			this.oldCurrent = old;
			this.current = index;
			
			this.getgoods(index);
		},
		getgoods(current) {
			let that = this;
			this.$http({
				url: '/category/goodsList',
				data: {
					cur: current
				},
				success(res) {
					// console.log(res.data);
					that.goodsList = res.data.data;
				}
			});
		},
		goDetail(){
			uni.navigateTo({
				url:'../detail/detail'
			})
		}
	}
};
</script>

<style scoped>
.category {
	display: flex;
}
.leftNav {
	width: 24vw;
	height: 100vh;
	background-color: #f5f5f5;
}
.nav-item {
	width: 100%;
	height: 10vw;
	margin-left: 2rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	position: relative;
}
.select {
	background-color: #fff;
}


.oldSel::before {
	content: '';
	display: block;
	width: 8rpx;
	height: 0vw;
	box-sizing: border-box;
	background-color: rgb(255, 120, 1);
	position: absolute;
	left: 0;
	top: 0;
	animation: oldSelAnimate 0.7s;
}
.select::before {
	content: '';
	display: block;
	width: 8rpx;
	height: 10vw;
	box-sizing: border-box;
	background-color: rgb(255, 120, 1);
	position: absolute;
	left: 0rpx;
	top: 0;
	animation: selectAnimate 0.7s;
}
@keyframes selectAnimate {
	0% {
		left: -10rpx;
	}

	50% {
		left: 20rpx;
	}
	100% {
		left: 0rpx;
	}
}
@keyframes oldSelAnimate {
	from {
		top: 0;
		height: 10vw;
	}
	to {
		top: 4.5vw;
		height: 0vw;
	}
}
.rightGoods {
	flex: 1;
}

.goods-item {
	height: 20vw;
	width: 100%;
	display: flex;
	padding:  0 30rpx;
	box-sizing: border-box;
	
}
.goods-item image:nth-of-type(1) {
	height: 100%;
}
.goods-item .itemMessage{
	flex: 1;
display: flex;
justify-content: space-around;
flex-direction: column;
/* align-items: center; */
padding: 0 10rpx;
}
.goods-item .itemMessage .messText{
	font-size: 28rpx;
	font-weight: 200;
}
.messPrice{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.messPrice image{
	width: 40rpx;
}
.goods-item .itemMessage .pricetext{
	font-size: 28rpx;
	font-weight: 200;
	color:rgb(255, 149, 64) ;
}
</style>
